<div class="container-fluid" style="background-color: #EEEEEE; margin-top: 30px; margin-bottom: 30px;">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 hidden-xs" style="text-align: center" id="leftMenu">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"></h3>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"></a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                        <ul class="nav navbar-nav">
                            <li class="menu-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Danh mục<b class="caret"></b></a>
                            <?php echo $category ?>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
            <div class="row" id="divCategoryDetail"></div>
            <div class="row" id="divProductCategoryDetail" style="margin-left: 20px; text-align: center"></div>
            <div class="row" id="pageProductCategoryDetail" style="text-align: right"></div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 hidden-xs" style="text-align: center" id="rightMenu">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"></h3>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('.dropdown-toggle').dropdown();
    });
</script>

<script>
    function getCategoryDetail(id){
        var id = id;
//        alert(id);
        var url = "<?php echo base_url() ?>";
        var dataString = "id="+id;
//        alert(dataString);
        $.ajax({
            type: "POST",
            url: url+"home/getCategoryDetail",
            data: dataString,
            success: function(x){
//                alert(x);
                $('#divCategoryDetail').html(x);
            }
        });
    }

    function getProductCategoryDetail(id){
<!--        var id = id;-->
<!--        alert(id)-->
<!--        var url = "--><?php //echo base_url() ?><!--";-->
<!--        var dataString = "id="+id;-->
<!--        alert(dataString);-->
<!--        $.ajax({-->
<!--            type: "POST",-->
<!--            url: url+"home/getProductCategoryDetail",-->
<!--            data: dataString,-->
<!--            success: function(x){-->
<!--                alert(x);-->
<!--                $('#divProductCategoryDetail').html(x);-->
<!--            }-->
<!--        });-->

        var id = id;
//        alert(id);
        var url = "<?php echo base_url() ?>";
        var dataString = "id="+id;
//        alert(dataString);
        $.ajax({
            type: "POST",
            url: url+"home/setChoosenCategory",
            data: dataString,
            success: function(x){
//                alert(x);
                getHomeProductManager(0);
                getPage();
            }
        });
    }

    function getHomeProductManager(i){
//        alert(i);
        var url = "<?php echo base_url() ?>";
        $('#divProductCategoryDetail').load(url+"home/getProductCategoryDetail/"+i);
    }
</script>

<script>
    function prev(){
        var page = ($('#list li.active').index()-1); <!-- lay index cua li dang gan lop active -->
        $('#'+page).click();
    }

    function next(){
        var page = ($('#list li.active').index()+1);
        $('#'+page).click();
    }

    function getPage(){
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"home/getPage",
            success: function(x){
                //alert(x);
                $('#pageProductCategoryDetail').html(x);
            }
        });
    }
</script>